<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="员工信息" name="employeeUser">
      <div class="app-container">
        <div class="filter-container">
          <el-form ref="form" :model="form" :rules="rules" inline size="mini" label-width="100px">
            <el-collapse v-model="model">
              <el-collapse-item title="员工基本信息" name="1">
                <el-form-item label="员工编号" prop="employee_no">
                  <el-input v-model="form.employee_no" disabled="disabled" size="mini" class="form-input" placeholder="员工编号" />
                </el-form-item>
                <el-form-item label="员工姓名" prop="employee_name">
                  <el-input v-model="form.employee_name" disabled="disabled" size="mini" class="form-input" placeholder="员工姓名" />
                </el-form-item>
                <el-form-item label="部门" prop="organization_id">
                  <el-select v-model="form.organization_id" disabled="disabled" placeholder="请选择" class="form-input">
                    <el-option v-for="item in parentOrgOptions" :key="item.organization_id" :label="item.text" :value="item.organization_id"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="职务" prop="position_code">
                  <el-select v-model="form.position_code" disabled="disabled" placeholder="请选择" class="form-input">
                    <el-option
                      v-for="item in positioncode"
                      :key="item.POSITION_CODE"
                      :label="item.POSITION_NAME"
                      :value="item.POSITION_CODE"/>
                  </el-select>
                </el-form-item>
                <el-form-item id="gender" label="性别" prop="gender">
                  <r-select v-model="form.gender" disabled="disabled" type="1002" class="form-input"/>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker
                    v-model="form.birthday"
                    disabled="disabled"
                    class="form-input"
                    size="mini"
                    type="date"
                    placeholder="出生日期"/>
                </el-form-item>
                <el-form-item label="身份证号" prop="certificate_id">
                  <el-input
                    v-model="form.certificate_id"
                    disabled="disabled"
                    class="form-input"
                    size="mini"
                    placeholder="身份证号" />
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                  <el-input v-model="form.mobile" class="form-input" size="mini" placeholder="手机" />
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="form.phone" class="form-input" size="mini" placeholder="电话" />
                </el-form-item>
                <el-form-item label="E_MAIL" prop="e_mail">
                  <el-input v-model="form.e_mail" class="form-input" size="mini" placeholder="E_MAIL" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input v-model="form.address" class="form-input" size="mini" placeholder="地址" />
                </el-form-item>
                <el-form-item label="邮编" prop="zip_code">
                  <el-input v-model="form.zip_code" class="form-input" size="mini" placeholder="24小时热线" />
                </el-form-item>
                <el-form-item label="在职状态" prop="is_onjob">
                  <r-select v-model="form.is_onjob" type="1008" class="form-input"/>
                </el-form-item>
                <el-form-item label="离职日期" prop="dimission_date">
                  <el-date-picker
                    v-model="form.dimission_date"
                    disabled="disabled"
                    class="form-input"
                    size="mini"
                    type="date"
                    placeholder="离职日期"/>
                </el-form-item>
                <el-form-item label="建档日期" prop="found_date">
                  <el-date-picker
                    v-model="form.found_date"
                    disabled="disabled"
                    class="form-input"
                    size="mini"
                    type="date"
                    placeholder="建档日期"/>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item title="技能信息" name="2">
                <el-form-item label="工种" prop="worker_type_code">
                  <el-select v-model="form.worker_type_code" disabled="disabled" placeholder="请选择" class="form-input">
                    <el-option
                      v-for="item in workerTypeCodeList"
                      :key="item.WORKER_TYPE_CODE"
                      :label="item.WORKER_TYPE_NAME"
                      :value="item.WORKER_TYPE_CODE"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="技师等级" prop="technician_grade">
                  <r-select v-model="form.technician_grade" type="1007" class="form-input"/>
                </el-form-item>
                <el-form-item label="主维修工位" prop="default_position">
                  <el-select v-model="form.default_position" disabled="disabled" placeholder="请选择" class="form-input">
                    <el-option
                      v-for="item in defaultPositionList"
                      :key="item.LABOUR_POSITION_CODE"
                      :label="item.LABOUR_POSITION_NAME"
                      :value="item.LABOUR_POSITION_CODE"/>
                  </el-select>
                </el-form-item>
                <el-form-item label prop="employeeRoles" style="width:80%;">
                  <el-checkbox-group v-model="checkedList" disabled="disabled">
                    <el-checkbox v-for="role in sites" :label="role.CODE_ID" :key="role.CODE_ID" :value="role.CODE_ID">{{ role.CODE_CN_DESC }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-form>
          <div style="text-align:center">
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="editConfirm">保存</el-button>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="更改密码" name="quickChangePassword">
      <div class="elform">
        <el-form ref="password" :inline="true" :model="form1" :rules="passwordRules" size="mini" label-width="100px">
          <el-row>
            <el-col :span="24" style="margin-left:40%">
              <el-form-item prop="user_code" label="账号">
                <el-input v-model="form.user_code" disabled="disabled" placeholder="账号" class="search-input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-left:40%">
              <el-form-item prop="employee_name" label="姓名">
                <el-input v-model="form.employee_name" disabled="disabled" placeholder="姓名" class="search-input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-left:40%">
              <el-form-item prop="password" label="原密码">
                <el-input v-model="form1.password" type="password" placeholder="请输入原密码" class="search-input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-left:40%">
              <el-form-item prop="newPassword" label="新密码">
                <el-input v-model="form1.newPassword" type="password" class="search-input" placeholder="请输入8~15位密码" />
                <!-- <span style="foud-size:12px;color:red">{{passwordValidate.errorText}}</span> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-left:40%">
              <el-form-item prop="confirmPassword" label="确认密码">
                <el-input v-model="form1.confirmPassword" type="password" class="search-input" placeholder="确认密码" />
              </el-form-item>
            </el-col>
          </el-row>

          <br>
        </el-form>
      </div>
      <div style="text-align:center">
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmHandle">保 存</el-button>
        </span>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// import {
//   parseTime,
//   msg,
//   getJsonTree,
//   findArrKey
// } from '@/utils/index'
import {
  getUserInfoList,
  getDeptList,
  getPositionList,
  getworkerTypeList,
  getDefaultPositionList,
  findTcCodeByType,
  editConfirm,
  supereditpassword
} from '@/api/admin/auth/userInfo'
import {
  phone,
  email,
  telePhone,
  passWD
} from '@/utils/validator'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import _ from 'lodash'

export default {
  name: 'DealerInfoManage',
  components: {
    rSelect
  },
  // 过滤器
  filters: {
    isactiveFilter(val) {
      return val === 'Y' ? '有效' : '无效'
    }
  },
  mixins: [formMixins],
  data() {
    const validateNewPassword = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('请输入新密码'))
      } else {
        passWD(rule, value, callback)
      }
    }
    const validateConfirmPassword = (rule, value, callback) => {
      if (_.isEmpty(value)) {
        callback(new Error('请输入确认密码'))
      } else {
        if (value !== this.form1.newPassword) {
          callback(new Error('确认密码值和新密码值不一致'))
        }
        passWD(rule, value, callback)
      }
    }
    return {
      model: ['1', '2'],
      form: {},
      form1: {
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
      activeName: 'employeeUser',
      rules: {
        e_mail: [{
          required: true,
          message: '请填写正确的e_mail',
          trigger: 'blur',
          validator: email
        }],
        mobile: [{
          required: true,
          message: '请填写正确的手机号',
          trigger: 'blur',
          validator: phone
        }],
        phone: [{
          required: true,
          message: '请填写正确的电话',
          trigger: 'blur',
          validator: telePhone
        }]
      },
      passwordRules: {
        password: [{
          required: true,
          trigger: 'blur',
          message: '请输入原密码'
        }],
        newPassword: [{
          required: true,
          trigger: 'blur',
          validator: validateNewPassword
        }],
        confirmPassword: [{
          required: true,
          trigger: 'blur',
          validator: validateConfirmPassword
        }]
      },
      checkedList: [],
      parentOrgOptions: [],
      positioncode: [],
      workerTypeCodeList: [],
      defaultPositionList: [],
      sites: []
    }
  },
  computed: {
    passwordValidate: function() {
      let errorText = ''
      const g = /^(?!\d+$)(?![a-zA-Z]+$)(?![^(a-zA-Z|\d|\u4E00-\u9FA5)]+$).{8,}$/
      if (!this.newPassword) {
        errorText = ''
      } else if (!g.test(this.newPassword)) {
        errorText = '长度至少8位;数字,字母,特殊字符至少包含两种'
      } else if (this.newPassword !== this.confirmPassword) {
        errorText = '两次密码不匹配'
      } else {
        errorText = ''
      }
      return {
        errorText
      }
    },
    passwordCheckValidate: function() {
      let errorText = ''
      const g = /^(?!\d+$)(?![a-zA-Z]+$)(?![^(a-zA-Z|\d|\u4E00-\u9FA5)]+$).{8,}$/
      if (!this.confirmPassword) {
        errorText = ''
      } else if (!g.test(this.confirmPassword)) {
        errorText = '长度至少8位;数字,字母,特殊字符至少包含两种'
      } else if (this.newPassword !== this.confirmPassword) {
        errorText = '两次密码不匹配'
      } else {
        errorText = ''
      }
      return {
        errorText
      }
    }
  },
  mounted() {
    this.getDeptList()
    this.searchHandle()
  },
  methods: {
    // 查询
    searchHandle() {
      getUserInfoList()
        .then(res => {
          this.checkedList = res.roles.split(',')
          for (let i = 0; i < this.checkedList.length; i++) {
            this.checkedList[i] = Number(this.checkedList[i])
          }
          for (const key in res) {
            res[key.toLowerCase()] = res[key]
            delete res[key]
          }
          res.gender = Number(res.gender)
          this.form = _.cloneDeep(res)
        })
        .catch(err => {
          // table.complete()
        })
    },
    editConfirm() {
      this.form.employeeNo = this.form.employee_no
      this.form.employeeName = this.form.employee_name
      this.form.organizationId = this.form.organization_id
      this.form.positionCode = this.form.position_code
      this.form.certificateId = this.form.certificate_id
      this.form.eMail = this.form.e_mail
      this.form.zipCode = this.form.zip_code
      this.form.isOnjob = this.form.is_onjob
      this.form.dimissionDate = this.form.dimission_date
      this.form.found_date = this.form.found_date
      this.form.workerTypeCode = this.form.worker_type_code
      this.form.technicianGrade = this.form.technician_grade
      this.form.defaultPosition = this.form.default_position
      this.form.employeeRoles = this.checkedList
      this.$refs['form'].validate(valid => {
        if (valid) {
          editConfirm(this.form)
            .then(res => {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.searchHandle()
            })
            .catch(err => {
              // this.$message.error('保存失败')
            })
        } else {
          return false
        }
      })
    },
    confirmHandle() {
      this.$refs['password'].validate(valid => {
        if (valid) {
          const param = {
            password: this.form1.password,
            newPassword: this.form1.newPassword,
            userCode: this.form.user_code
          }
          supereditpassword(param)
            .then(res => {
              this.$message({
                type: 'success',
                message: '修改成功  '
              })
              this.form1.password = ''
              this.form1.newPassword = ''
              this.form1.confirmPassword = ''
            })
            .catch(err => {
              // this.$message({
              //   type: 'info',
              //   message: err.response.data.errorMsg
              // })
            })
        }
      })
    },
    getDeptList() {
      getDeptList()
        .then(res => {
          res.forEach(el => (el.organization_id = Number(el.id)))
          this.parentOrgOptions = res
        })
        .catch(err => {
          // table.complete()
        })
      getPositionList()
        .then(res => {
          // res.forEach(el => (el.organization_id = Number(el.id)));
          this.positioncode = res
        })
        .catch(err => {
          // table.complete()
        })
      getworkerTypeList()
        .then(res => {
          this.workerTypeCodeList = res
        })
        .catch(err => {
          // table.complete()
        })
      getDefaultPositionList()
        .then(res => {
          debugger
          this.defaultPositionList = res
        })
        .catch(err => {
          // table.complete()
        })
      findTcCodeByType(1006)
        .then(res => {
          this.sites = _.cloneDeep(res)
        })
        .catch(err => {
          // table.complete()
        })
    }
  }
}

</script>

<style scoped>
</style>
